<template>
  <div class="wrap">
    <div class="register-form-wrap">
      <v-avatar size="62" class="mb-3">
        <img
          :src="
            userInfo.avatar || 'https://cc.lzsjl.top/leazerfspaceavatar.jpg'
          "
          alt="avatar"
        />
      </v-avatar>
      <!-- 这里的autocomplete="new-password"是为了防止表单记忆 -->
      <v-form
        ref="updateForm"
        v-model="valid"
        autocomplete="new-password"
        class="ml-8"
      >
        <v-text-field
          class="mt-5"
          v-model="updateForm.nickname"
          :rules="nicknameRules"
          label="昵称"
          required
          autocomplete="new-password"
        ></v-text-field>
        <v-text-field
          class="mt-5"
          v-model="updateForm.realname"
          :rules="realnameRules"
          label="真实姓名"
          required
          autocomplete="new-password"
        ></v-text-field>
        <v-text-field
          class="mt-5"
          v-model="updateForm.phone"
          :rules="phoneRules"
          label="手机号码"
          required
          autocomplete="new-password"
        ></v-text-field>
        <v-select
          :items="['学生', '教师', '其他']"
          label="请选择身份"
          :rules="identityRules"
          v-model="updateForm.identity"
        ></v-select>
        <v-text-field
          class="mt-5"
          v-model="updateForm.avatar"
          :rules="avatarRules"
          label="头像链接，选填"
          required
          autocomplete="new-password"
        ></v-text-field>
        <v-text-field
          class="mt-5"
          v-model="updateForm.address"
          label="地址，选填"
          required
          autocomplete="new-password"
        ></v-text-field>
        <v-text-field
          class="mt-5"
          v-model="updateForm.school"
          label="学校，选填"
          required
          autocomplete="new-password"
        ></v-text-field>
        <v-select
          :items="['男', '女']"
          label="请选择性别，选填"
          :rules="genderRules"
          v-model="updateForm.gender"
        ></v-select>
        <div style="display: flex; justify-content: flex-end; width: 100%">
          <v-btn
            color="primary"
            class="mt-5"
            depressed
            large
            @click="updateInfo"
            >更新信息</v-btn
          >
        </div>
      </v-form>
    </div>
  </div>
</template>

<script>
import { update } from '@/api/oper'
export default {
  data() {
    return {
      valid: false,

      updateForm: {
        nickname: '',
        realname: '',
        avatar: '',
        phone: '',
        address: '',
        school: '',
        identity: '',
        gender: ''
      },

      userInfo: {},

      nicknameRules: [(v) => !!v || '请输入昵称'],
      realnameRules: [(v) => !!v || '请输入真实姓名'],
      phoneRules: [
        (v) => !!v || '请输入手机号码',
        (v) =>
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
            v
          ) || '手机号码格式有误'
      ],
      avatarRules: [
        (v) => /(http(s)?:\/\/\S+)?/i.test(v) || '图片链接必须符合规则'
      ],
      identityRules: [
        (v) => !!v || '请选择身份',
        (v) => ['学生', '教师', '其他'].includes(v) || '身份不正确'
      ],
      genderRules: [
        (v) => [null, '', undefined, '男', '女'].includes(v) || '性别不正确'
      ]
    }
  },
  mounted() {
    (async () => {
      this.initUserInfo()
    })()
  },
  methods: {
    initUserInfo() {
      this.userInfo = this.$store.getters.userinfo
      for (const x in this.updateForm) {
        this.updateForm[x] = this.userInfo[x]
      }
    },
    updateInfo() {
      if (!this.$refs.updateForm.validate()) {
        return
      }
      let same = true
      for (const x in this.updateForm) {
        if (this.updateForm[x] !== this.userInfo[x]) {
          same = false
          break
        }
      }
      if (same) {
        this.$toast.error('没有做任何改动')
        return
      }
      update(this.updateForm)
        .then(async (res) => {
          this.updateForm = res.data.data
          this.$toast.success('更新信息成功')
          await this.$store.dispatch('getUserinfo')
          this.initUserInfo()
        })
        .catch((err) => err)
    }
  }
}
</script>

<style scoped>
.wrap {
  min-height: 100vh;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-image: url('https://cc.lzsjl.top/minebk.png');
}
.register-form-wrap {
  padding: 40px 60px 0 90px;
  width: 600px;
}
</style>
